Tailwind CSSのgroup

親要素の状態に応じて子要素のスタイルを変えるための仕組み

基本構造

group

親要素に付けるクラス

子要素に付ける修飾クラス

ほとんどの状態修飾子に対応している

複数のgroupを使う

例: cardとmenuはそれぞれ別のスコープになる

code:html

<div class="group/card hover:bg-gray-100 p-4">

<p class="group-hover/card:text-blue-500">カードのhover時に青くなる</p>

</div>

<div class="group/menu hover:bg-gray-100 p-4">

<p class="group-hover/menu:text-red-500">メニューのhover時に赤くなる</p>

</div>

例

hover時に子を変える

code:html

<button class="group relative p-4 bg-gray-800 text-white">

<span class="group-hover:underline">テキスト</span>

</button>

親ボタンが hover されたときに、テキストが下線付きになる

forcus, activeに使う

code:html

<div class="group">

<input type="text" class="border p-2 focus:outline-none">

<span class="group-focus-within:text-blue-500">入力中に青くなる</span>

</div>

通常のCSSだと下記の様に書いている感じ

code:css

.parent:hover .child {

color: blue;

}

関連